<template>
  <div class="overView">
    <div class="content">
      <el-card shadow="always" style="overflow-y: scroll;"  v-if="user.permission !== '03'">
        <div slot="header" class="clearfix">
          <span>公告通知</span>
        </div>
        <el-timeline :reverse="true">
          <el-timeline-item v-for="item in notice" :key="item.uuid" :timestamp="item.createTime" placement="top">
            <el-card>
              <p style="margin-bottom: 0.1rem;">公告标题：{{item.noticeTitle}}</p>
              <p style="margin-bottom: 0.1rem;">创建人：{{item.createByName}}</p>
              <p style="margin-bottom: 0.1rem;">创建时间：{{item.createTime}}</p>
              <p style="margin-bottom: 0.1rem;cursor: pointer;text-decoration: underline;color: rgb(156, 136, 255);user-select: none;" @click="showDetail(item.uuid)">查看详情</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
      <el-card shadow="always"  v-if="user.permission == '04'">
        <div slot="header" class="clearfix">
          <span>近7天宿舍卫生分数</span>
        </div>
        <div id="chart">
        </div>
      </el-card>
      <el-card shadow="always" :style="user.permission == '03' || user.permission == '04' ? 'width: 100%;height:auto;' : ''">
        <el-descriptions title="个人信息" direction="vertical" :column="3" border>
          <el-descriptions-item label="工号" :contentStyle="{'text-align': 'center'}" :labelStyle="{'text-align': 'center'}">{{ user.account }}</el-descriptions-item>
          <el-descriptions-item label="姓名" :contentStyle="{'text-align': 'center'}" :labelStyle="{'text-align': 'center'}">{{ user.userName }}</el-descriptions-item>
          <el-descriptions-item label="角色" :contentStyle="{'text-align': 'center'}" :labelStyle="{'text-align': 'center'}">{{ user.permission == '01' ? '系统管理员' :  user.permission == '02' ? '宿舍管理员' : user.permission == '03' ? '维修人员' : '学生' }}</el-descriptions-item>
          <el-descriptions-item label="性别" :contentStyle="{'text-align': 'center'}" :labelStyle="{'text-align': 'center'}">{{ user.gender == '0' ? '女' : '男' }}</el-descriptions-item>
          <el-descriptions-item label="家庭住址" :contentStyle="{'text-align': 'center'}" :labelStyle="{'text-align': 'center'}">{{ user.address }}</el-descriptions-item>
          <el-descriptions-item label="联系方式" :contentStyle="{'text-align': 'center'}" :labelStyle="{'text-align': 'center'}">{{ user.phone }}</el-descriptions-item>
          <el-descriptions-item v-if="user.permission == '04'" label="院系" :contentStyle="{'text-align': 'center'}" :labelStyle="{'text-align': 'center'}">{{ user.department}}</el-descriptions-item>
          <el-descriptions-item v-if="user.permission == '04'" label="专业" :contentStyle="{'text-align': 'center'}" :labelStyle="{'text-align': 'center'}">{{ user.specialty }}</el-descriptions-item>
          <el-descriptions-item v-if="user.permission == '04'" label="班级" :contentStyle="{'text-align': 'center'}" :labelStyle="{'text-align': 'center'}">{{ user.className }}</el-descriptions-item>
          <el-descriptions-item v-if="user.permission == '04'" label="宿舍楼" :contentStyle="{'text-align': 'center'}" :labelStyle="{'text-align': 'center'}">{{ user.buildingName }}</el-descriptions-item>
          <el-descriptions-item v-if="user.permission == '04'" label="宿舍号" :contentStyle="{'text-align': 'center'}" :labelStyle="{'text-align': 'center'}">{{ user.dormitoryNumber }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <el-dialog title="公告详情" :visible.sync="visible" width="30%" @close="close">
      <el-descriptions direction="vertical" :column="2" border>
        <el-descriptions-item label="公告标题" :contentStyle="{'text-align': 'center'}" :labelStyle="{'text-align': 'center'}">{{ noticeForm.noticeTitle }}</el-descriptions-item>
        <el-descriptions-item label="公告内容" :contentStyle="{'text-align': 'center'}" :labelStyle="{'text-align': 'center'}">{{ noticeForm.noticeContent }}</el-descriptions-item>
        <el-descriptions-item label="创建人" :contentStyle="{'text-align': 'center'}" :labelStyle="{'text-align': 'center'}">{{ noticeForm.createByName }}</el-descriptions-item>
        <el-descriptions-item label="创建时间" :contentStyle="{'text-align': 'center'}" :labelStyle="{'text-align': 'center'}">{{ noticeForm.createTime }}</el-descriptions-item>
        <el-descriptions-item label="公告附件" :contentStyle="{'text-align': 'center'}" :labelStyle="{'text-align': 'center'}">
          <el-tooltip content="点击下载" placement="top" effect="light">
            <span @click="downLoad" style="cursor: pointer;">
              {{ noticeForm.noticeFile }}
              <i class="el-icon-download"></i>
            </span>
          </el-tooltip>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'overView',
  data() {
    return {
      user: {},
      notice: [],
      visible: false,
      fileNames: [],
      noticeForm: {}
    }
  },
  methods: { 
    downLoad() {
      let url = this.$api.common.downLoad
      let formData = new FormData();
      formData.append('fileName',this.noticeForm.noticeFile)
      this.$http(url,formData,true,true).then(res => {
        let blob = new Blob([res.data]);
        let downloadElement = document.createElement("a");
        document.body.appendChild(downloadElement);
        let href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        downloadElement.download = this.noticeForm.noticeFile;
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(href);        
      })
    },
    showDetail(uuid){
      this.$http(this.$api.notice.info,this.reqData(uuid)).then(res => {
        if (res.data.code === 200) {
          this.noticeForm = res.data.data;
          this.fileNames = [this.noticeForm.noticeFile]
          console.log(this.noticeForm);
          this.visible = true
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    close() {
      this.fileNames = []
    },
    queryChart() {
      this.$http(this.$api.evaluation.chart,this.reqData(this.user.uuid)).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data;
          console.log(data);
          let x = [],y = [];
          data.forEach(element => {
            x.push(element.checkDate)
            y.push(element.score)
          });
          this.$nextTick(() => {
            let dom = document.getElementById('chart');
            console.log(dom,x,y);
            if (dom.hasAttribute("_echarts_instance_")) dom.removeAttribute("_echarts_instance_");
            let myChart = echarts.init(dom)
            let option = {
              xAxis: {
                type: 'category',
                data: x
              },
              tooltip: {
                show:  true
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: y,
                  type: 'line',
                  smooth: true
                }
              ]
            };
            option && myChart.setOption(option);
          })
        }
      })
    },
    queryNotice() {
      let queryForm = {

      }
      queryForm.adminId = this.user.uuid;
      queryForm.permission = this.user.permission;
      let url = this.$api.notice.list;
      this.$http(url,this.reqData(queryForm,1,9999)).then(res => {
        if (res.data.code === 200) {
          let data = res.data.data;
          this.notice = data.list;
          console.log(this.notice);
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  },
  mounted() {
    this.user = JSON.parse(sessionStorage.getItem('user'))
    if (this.user.permission == '04') {
      this.queryChart();
    }
    if (this.user.permission !== '03') {
      this.queryNotice();
    }
  }
}
</script>
<style lang="less" scoped>
.overView {
  // height: 100%;
  // background: #fff;
  padding: 0 0.24rem;
  // overflow-y: scroll;
  .content {
    height: 5rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .el-card {
      width: 49%;
      height: 100%;
      margin-top: 0.2rem;
      #chart {
        width: 100%;
        height: 4rem;
        // background: #ccc;
      }
    }
  }
}
</style>